<template>
    <el-row>
        <el-col :span="24" class="col">
            <el-col>
                <el-row class="title">
                    <el-col :span="20"><span style="color: #1890ff;">今日指导价格：</span> <span
                            style="margin-right: 40px;">纸品类：{{ zhipin }} 元/斤</span>塑料瓶类：{{ suliao }} 元/个</el-col>
                    <el-col :span="1" :offset="20" style="margin:8px;"><el-button type="primary"
                            @click="edite">编辑价格</el-button></el-col>
                </el-row>
            </el-col>
            <el-col :span="24">
                <el-row>
                    <el-col :span="6">用户手机号：<el-input v-model="search.phone" placeholder="请输用户手机号" clearable /></el-col>
                    <el-col :span="6">用户名字：<el-input v-model="search.name" placeholder="请输入用户名字"
                            clearable></el-input></el-col>
                    <el-col :span="6">小区名字：<el-input v-model="search.name1" placeholder="请输入小区名字"
                            clearable></el-input></el-col>
                </el-row>
            </el-col>
            <el-col :span="24">
                <el-row style="margin: 10px;">
                    <el-col :span="10">添加时间:
                        <el-date-picker v-model="search.time" type="daterange" range-separator="至"
                            start-placeholder="日期" end-placeholder="终止日期" />
                    </el-col>
                    <el-col :span="10">状态：
                        <el-button-group class="ml-4">
                            <el-button :type="xuanzhong == 0 ? 'primary' : 'default'" @click="fenlie(0)">全部</el-button>
                            <el-button :type="xuanzhong == 1 ? 'primary' : 'default'" @click="fenlie(1)">已取消</el-button>
                            <el-button :type="xuanzhong == 2 ? 'primary' : 'default'" @click="fenlie(2)">待接单</el-button>
                            <el-button :type="xuanzhong == 3 ? 'primary' : 'default'" @click="fenlie(3)">进行中</el-button>
                            <el-button :type="xuanzhong == 4 ? 'primary' : 'default'" @click="fenlie(4)">已完成</el-button>
                        </el-button-group>
                    </el-col>
                    <el-col :span="1"><el-button type="primary"
                            @click="sousuo(search.phone,search.name,search.name1, search.time)">搜索</el-button></el-col>
                </el-row>
            </el-col>
        </el-col>
    </el-row>
    <el-col :span="24" class="col">
        <el-table :data="areaList" border>
            <el-table-column prop="goodsId" label="订单ID" align="center" label-class-name="header"></el-table-column>
            <el-table-column prop="goodsName" label="用户手机号" align="center" label-class-name="header"></el-table-column>
            <el-table-column prop="goodsShopName" label="用户昵称" align="center"
                label-class-name="header"></el-table-column>
            <el-table-column prop="goodsSalesVolume" label="所属小区" align="center"
                label-class-name="header"></el-table-column>
            <el-table-column prop="goodsPresentPrice" label="回收地址" align="center"
                label-class-name="header"></el-table-column>
            <el-table-column prop="addTime" label="备用信息" align="center" label-class-name="header"></el-table-column>
            <el-table-column prop="goodsStatus" label="下单时间" align="center" label-class-name="header"></el-table-column>
            <el-table-column prop="goodsStatus" label="状态" align="center" label-class-name="header"></el-table-column>
            <el-table-column prop="goodsStatus" label="回收员" align="center" label-class-name="header"></el-table-column>
            <el-table-column prop="goodsStatus" label="上门时间" align="center" label-class-name="header"></el-table-column>
            <el-table-column prop="goodsStatus" label="金额" align="center" label-class-name="header"></el-table-column>
            <el-table-column label="操作" align="center" label-class-name="header">
                <template #default="item">
                    <el-button type="text" @click="xiajia(item)">下架</el-button>
                    <!-- <el-button type="text" @click="edite(item.$index)">编辑</el-button> -->
                </template>
            </el-table-column>
        </el-table>
    </el-col>
    <el-dialog v-model="show" :title="title" width="500" destroy-on-close="true">
        <EditeFeiPin :data="data" @operate="operate"></EditeFeiPin>
    </el-dialog>
</template>

<script setup>
import { reactive, onMounted, ref } from 'vue';
import axios from 'axios';
import EditeFeiPin from './components/feipin/EditeFeiPin.vue';
let res = null;
let title = ref("");
let show = ref(false);
let areaList = ref([]);
let xuanzhong = ref(0);
let zhipin = ref(0)
let suliao = ref(0)
let data = ref({
    "paperPrice": 0,
    "plasticPrice": "0"
});
const edite = function () {
    show.value = true;
    title.value = "编辑价格";
    data.value.paperPrice = zhipin.value;
    data.value.plasticPrice = suliao.value

}

const fenlie = function (index) {
    xuanzhong.value = index;
}
const xiajia = function (item) {
    console.log(item);

}

const search = reactive({
    phone:null,
    name: null,
    name1: null,
    time: null
});

const timeFun = (time) => {
    var d = time ? new Date(time) : new Date();
    var year = d.getFullYear();
    var month = d.getMonth() + 1;
    var day = d.getDate();
    var hours = d.getHours();
    var min = d.getMinutes();
    var seconds = d.getSeconds();

    if (month < 10) month = "0" + month;
    if (day < 10) day = "0" + day;
    if (hours < 0) hours = "0" + hours;
    if (min < 10) min = "0" + min;
    if (seconds < 10) seconds = "0" + seconds;
    return year + "-" + month + "-" + day + " " + hours + ":" + min + ":" + seconds;
}

const sousuo = async function(phone,name,name1,time){
    let starTime = ""
    let endTime = ""
    if (time != null) {
        starTime = timeFun(time[0]);
        endTime = timeFun(time[1]);
    }
    res = await axios.get(`http://43.143.190.87:8091/panghudaojiaBackend/recycleOrder/queryRecycleOrderList?pageNum=1&pageSize=10&status=3&userName=${name}&userPhone=${phone}&communityName=${name1}&startTime=${starTime}&endTime=${endTime}`)
    areaList.value = res.data.data.list.map(item => {
        // item.address = item.communityProvince + item.communityCity + item.communityDistrict;
        return item;
    });
    console.log(res);
}

const operate = async function () {
    res = await axios.get("http://43.143.190.87:8091/panghudaojiaBackend/recycleOrder/queryRecyclePrice");
    zhipin.value = res.data.data.paperPrice;
    suliao.value = res.data.data.plasticPrice;
    show.value = false;
}


//组件首次挂载结束（通常代表组件首次加载）
onMounted(async function () {
    res = await axios.get("http://43.143.190.87:8091/panghudaojiaBackend/recycleOrder/queryRecyclePrice");
    zhipin.value = res.data.data.paperPrice;
    suliao.value = res.data.data.plasticPrice;
    console.log(res);
})




</script>

<style lang="less" scoped>
.title {
    display: flex;
    width: 1133px;
    height: 121px;
    background-color: rgb(248, 248, 243);
    border-radius: 5px;
    font-size: 28px;
    padding-top: 40px;
}

.el-row {
    margin: 10px;
}

.el-input {
    width: 180px;
    height: 35px;
}

/deep/.header {
    background-color: #1890ff !important;
    color: white;
}
</style>